<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-position="left"
    class="main-from"
  >
    <div class="text-box">
      <p class="text-title">奖学金类型</p>
      <p class="text-content">
        在完成所有必填项后方能成功提交报名表。每位申请人只有一次提交报名表的机会，报名表一经提交，您将无法修改报名表的内容。报名表所有内容不必一次性完成。您可以随时登录，填写和修改，但请注意及时保存您的修改。
      </p>
      <p class="text-title-black">
        <span class="sn">1.</span> 中欧FMBA-GMAT合作奖学金
      </p>
      <p class="text-content">
        GMAT成绩在有效期内，720分以上（含720分）的申请者均可申请。每份金额20,000元人民币。
      </p>
      <p class="text-title-black"><span class="sn">2.</span>鲲鹏奖学金</p>
      <p class="text-content">
        工作地点位于非上海地区的申请者均可申请，申请者需要提供公司盖章的有效证明，证明其日常工作地点。其中，工作地点位于中西部地区、港澳台和境外的奖学金金额为每份80,000元人民币，其余工作地点位于非上海地区的奖学金金额为每份50,000元人民币。
      </p>
      <p class="text-content">
        *中西部地区包括：安徽省、重庆市、甘肃省、广西壮族自治区、贵州省、海南省、河北省、河南省、黑龙江省、湖北省、湖南省、吉林省、江西省、辽宁省、内蒙古自治区、宁夏回族自治区、青海省、山西省、陕西省、四川省、西藏自治区、新疆维吾尔自治区、云南省。
      </p>
      <p class="text-content">（按照首字母顺序排列，排名不分先后）。</p>
      <p class="text-title-black"><span class="sn">3.</span>专项奖学金</p>
      <p class="text-content conten-span">
        <span>
          申请条件：申请者拥有以下任意一类职业资质均可申请，专项奖学金的申请者须按要求提交相关职业资质证明。每份金额50,000元人民币。
        </span>
        <span class="mb5"> <span class="sn">1)</span>ACCA中国区会员 </span>
        <span class="mb5">
          <span class="sn">2)</span
          >通过CIMA专业阶段全部考试的学员、或者北亚区CIMA/CGMA会员
        </span>
        <span class="mb5"> <span class="sn">3)</span>通过CFA三级考试 </span>
        <span class="mb5">
          <span class="sn">4)</span
          >获得CICPA全科合格证书，或CICPA非执业会员，或CICPA执业会员
        </span>
        <span class="mb5">
          <span class="sn">5)</span>澳洲注册会计师和澳洲资深注册会计师
        </span>
        <span class="mb5"> <span class="sn">6)</span>获得FRM证书 </span>
        <span class="mb5"> <span class="sn">7)</span>保荐人 </span>
      </p>
      <p class="text-title-black">
        <span class="sn">4.</span> 中欧-融义FMBA明日之星奖学金
      </p>
      <p class="text-content">
        中欧-融义FMBA明日之星奖学金由中欧FMBA校友企业“融义财富”设立，用以助力中欧FMBA培养现代金融领域领军人才。拥有10年以上（含10年）金融行业工作经验和5年以上（含5年）管理经验的申请者均可申请。每份金额100,000元人民币。
      </p>
      <p class="fssecondary-title">新生奖学金申请规则</p>
      <p class="text-content conten-span">
        <span class="mb5">
          <span class="sn">1、</span
          >申请者被中欧FMBA录取为当年入学的学生后即进入奖学金评选流程，奖学金名额有限，择优发放；
        </span>
        <span class="mb5">
          <span class="sn">2、</span>上述各项奖学金可以同时兼得；
        </span>
        <span class="mb5">
          <span class="sn">3、</span
          >中欧-融义FMBA明日之星奖学金需另行进行奖学金面试。
        </span>
      </p>

      <p class="fssecondary-title">请选择您要申请的奖项</p>
      <el-checkbox-group v-model="value1" class="checkbox-box">
        <div v-for="item in awardsList" :key="item.id" class="checkbox">
          <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
        </div>
      </el-checkbox-group>
      <p class="fssecondary-title">
        申请专项奖学金的申请者请选择您已获得的证书
      </p>
      <el-checkbox-group v-model="value2" class="checkbox-box">
        <div v-for="item in certificateList" :key="item.id" class="checkbox">
          <el-checkbox :label="item.id">{{ item.name }}</el-checkbox>
        </div>
      </el-checkbox-group>
      <div class="footer-but">
        <el-button type="primary" @click="saveForm('ruleForm')">保存</el-button>
        <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "scholarship", //奖学金申请
  props: {},
  data() {
    return {
      value1: [],
      value2: [],
      awardsList: [
        { name: "中欧FMBA-GMAT合作奖学金", id: 1 },
        { name: "鲲鹏奖学金", id: 2 },
        { name: "专项奖学金", id: 3 },
        { name: "中欧-融义FMBA明日之星奖学金", id: 4 },
      ],
      certificateList: [
        { name: "ACCA中国区会员", id: 1 },
        {
          name: "通过CIMA专业阶段全部考试的学员、或者北亚区CIMA/CGMA会员",
          id: 2,
        },
        { name: "通过CFA三级考试，或CFA协会会员，或CFA地方协会会员", id: 3 },
        {
          name: "获得CICPA全科合格证书，或CICPA非执业会员，或CICPA执业会员",
          id: 4,
        },
        { name: "澳洲注册会计师和澳洲资深注册会计师", id: 5 },
        { name: "获得FRM证书", id: 6 },
        { name: "保荐人", id: 7 },
      ],
    };
  },
  methods: {
    saveForm(formName) {
      console.log("保存");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      (this.ruleForm = {}), this.$refs[formName].resetFields();
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.text-box {
  .text-content {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 30px;
    margin-bottom: 45px;
    color: #5a5a5a;

    span {
      display: block;
    }

    .mb5 {
      position: relative;
      margin-bottom: 10px;
      padding-left: 22px;

      .sn {
        position: absolute;
        left: 0px;
      }
    }

    .wsubtitle {
      font-weight: bold;
    }
  }

  .text-title {
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #003963;
    margin-bottom: 19px;
  }

  .text-title-black {
    position: relative;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
    padding-left: 20px;

    .sn {
      position: absolute;
      left: 0px;
    }
  }

  .fssecondary-title {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #000000;
    margin-bottom: 20px;
  }

  .checkbox-box {
    padding-bottom: 45px;

    .checkbox {
      padding-bottom: 5px;
    }

    ::v-deep .el-checkbox__label {
      color: #5a5a5a;
      display: block;
    }
  }

  .footer-but {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;

    ::v-deep .el-button {
      width: 250px;
      height: 55px;
      margin: 30px 22.5px;
    }
  }
}

@media (max-width: 768px) {
  .text-box {
    .text-content {
      font-size: 14px;

      .mb5 {
        margin-bottom: 5px;
      }
    }

    .text-title {
      font-size: 18px;
      margin-bottom: 10px;
    }

    .text-title-black {
      font-size: 16px;
    }

    .fssecondary-title {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #000000;
      margin-bottom: 20px;
    }

    .footer-but {
      ::v-deep .el-button {
        width: 125px;
        height: 40px;
        margin: 31px 22.5px;
        font-size: 16px;
      }
    }
  }

  .checkbox-box {
    padding-bottom: 45px;

    .checkbox {
      padding-bottom: 5px;
    }

    ::v-deep .el-checkbox {
      width: 100%;
      display: flex;
      height: auto;
      align-items: flex-start;
    }

    ::v-deep .el-checkbox__input {
      padding-top: 2px;
    }

    ::v-deep .el-checkbox__label {
      width: 90%;
      color: #5a5a5a;
      display: block;
      font-size: 14px;
      white-space: normal;
      word-break: break-all;
      line-height: 20px;
      height: auto;
    }
  }
}
</style>
